import React, { memo, useCallback } from 'react';
import { Card, Button, Tag, Space, Tooltip, Avatar } from 'antd';
import { 
  EditOutlined, 
  DeleteOutlined, 
  CheckOutlined, 
  ClockCircleOutlined,
  UserOutlined,
  BookOutlined,
  EnvironmentOutlined
} from '@ant-design/icons';
import type { IScheduleInstanceCardProps } from '@/types/components/schedule';
import { ScheduleInstanceStatusEnum } from '@/types/schedule';
import styles from './ScheduleInstanceCard.module.css';

/**
 * 课程实例卡片组件
 * @description 用于显示单个课程实例的详细信息，支持编辑、取消、完成等操作
 */
const ScheduleInstanceCard: React.FC<IScheduleInstanceCardProps> = memo(({
  instance,
  student,
  course,
  template,
  onEdit,
  onCancel,
  onComplete,
  onMakeup,
  className,
  showActions = true,
  size = 'default',
  readonly = false
}) => {
  // 处理编辑操作
  const handleEdit = useCallback(() => {
    onEdit?.();
  }, [onEdit]);

  // 处理取消操作
  const handleCancel = useCallback(() => {
    onCancel?.();
  }, [onCancel]);

  // 处理完成操作
  const handleComplete = useCallback(() => {
    onComplete?.();
  }, [onComplete]);

  // 处理补课操作
  const handleMakeup = useCallback(() => {
    onMakeup?.();
  }, [onMakeup]);

  // 获取状态标签
  const getStatusTag = () => {
    const statusConfig = {
      [ScheduleInstanceStatusEnum.SCHEDULED]: { color: 'blue', text: '已安排' },
      [ScheduleInstanceStatusEnum.COMPLETED]: { color: 'green', text: '已完成' },
      [ScheduleInstanceStatusEnum.CANCELLED]: { color: 'red', text: '已取消' },
      [ScheduleInstanceStatusEnum.MAKEUP]: { color: 'orange', text: '补课' },
      [ScheduleInstanceStatusEnum.DELETED]: { color: 'default', text: '已删除' }
    };

    const config = statusConfig[instance.status] || { color: 'default', text: '未知' };
    return <Tag color={config.color} className={styles.statusTag}>{config.text}</Tag>;
  };

  // 渲染操作按钮
  const renderActions = () => {
    if (!showActions || readonly) return null;

    const actions = [];

    // 根据状态显示不同的操作按钮
    if (instance.status === ScheduleInstanceStatusEnum.SCHEDULED) {
      actions.push(
        <Tooltip key="complete" title="标记完成">
          <Button
            type="text"
            size="small"
            icon={<CheckOutlined />}
            onClick={handleComplete}
            className={styles.completeButton}
          />
        </Tooltip>
      );
      
      actions.push(
        <Tooltip key="cancel" title="取消课程">
          <Button
            type="text"
            size="small"
            danger
            icon={<DeleteOutlined />}
            onClick={handleCancel}
          />
        </Tooltip>
      );
    }

    if (instance.status === ScheduleInstanceStatusEnum.CANCELLED && onMakeup) {
      actions.push(
        <Tooltip key="makeup" title="安排补课">
          <Button
            type="text"
            size="small"
            icon={<ClockCircleOutlined />}
            onClick={handleMakeup}
            className={styles.makeupButton}
          />
        </Tooltip>
      );
    }

    if (onEdit) {
      actions.push(
        <Tooltip key="edit" title="编辑">
          <Button
            type="text"
            size="small"
            icon={<EditOutlined />}
            onClick={handleEdit}
          />
        </Tooltip>
      );
    }

    return actions.length > 0 ? <Space size="small">{actions}</Space> : null;
  };

  // 渲染卡片标题
  const renderTitle = () => (
    <div className={styles.cardTitle}>
      <div 
        className={styles.courseColorIndicator}
        style={{ backgroundColor: course.color }}
      />
      <BookOutlined className={styles.titleIcon} />
      <span className={styles.courseName}>{course.name}</span>
      {getStatusTag()}
    </div>
  );

  return (
    <Card
      className={`${styles.instanceCard} ${styles[size]} ${className || ''}`}
      title={renderTitle()}
      extra={renderActions()}
      size={size === 'large' ? 'default' : 'small'}
      hoverable={!readonly}
    >
      <div className={styles.cardContent}>
        <div className={styles.infoRow}>
          <UserOutlined className={styles.studentIcon} />
          <span className={styles.label}>学生：</span>
          <span className={styles.value}>{student.name}</span>
        </div>
        
        <div className={styles.infoRow}>
          <ClockCircleOutlined className={styles.timeIcon} />
          <span className={styles.label}>时间：</span>
          <span className={styles.value}>
            {instance.startTime} - {instance.endTime}
          </span>
        </div>
        
        {instance.location && (
          <div className={styles.infoRow}>
            <EnvironmentOutlined className={styles.locationIcon} />
            <span className={styles.label}>地点：</span>
            <span className={styles.value}>{instance.location}</span>
          </div>
        )}
        
        <div className={styles.infoRow}>
          <span className={styles.label}>第</span>
          <span className={styles.sequenceNumber}>{instance.sequenceNumber}</span>
          <span className={styles.label}>次课</span>
          {template && (
            <span className={styles.progress}>
              （共{template.totalCount}次）
            </span>
          )}
        </div>
        
        {instance.remark && (
          <div className={styles.remarkRow}>
            <span className={styles.label}>备注：</span>
            <span className={styles.remark}>{instance.remark}</span>
          </div>
        )}
      </div>
    </Card>
  );
});

ScheduleInstanceCard.displayName = 'ScheduleInstanceCard';

export default ScheduleInstanceCard;